<!DOCTYPE HTML>
<html>
<head>
<title>{{goods.goodsname}}_{{ goods.title }}</title>
<link href="/static/myhome/css/bootstrap.css" rel='stylesheet' type='text/css' />
<script src="/static/myhome/js/jquery.min.js"></script>
<script src="/static/myhome/js/bootstrap.min.js"></script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="/static/myhome/js/jquery.min.js"></script>
<!-- Custom Theme files -->
<link href="/static/myhome/css/style.css" rel='stylesheet' type='text/css' />
<!-- Custom Theme files -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
</script>
<!----webfonts---->
<link href='http://fonts.googleapis.com/css?family=Exo+2:100,200,300,400,500,600,700,800,900' rel='stylesheet' type='text/css'>
 <!----details-product-slider--->
				<!-- Include the Etalage files -->
					<link rel="stylesheet" href="/static/myhome/css/etalage.css">
					<script src="/static/myhome/js/jquery.etalage.min.js"></script>
				<!-- Include the Etalage files -->
				<script>
						jQuery(document).ready(function($){

							$('#etalage').etalage({
								thumb_image_width: 300,
								thumb_image_height: 400,

								show_hint: true,
								click_callback: function(image_anchor, instance_id){
									alert('Callback example:\nYou clicked on an image with the anchor: "'+image_anchor+'"\n(in Etalage instance: "'+instance_id+'")');
								}
							});
							// This is for the dropdown list example:
							$('.dropdownlist').change(function(){
								etalage_show( $(this).find('option:selected').attr('class') );
							});

					});
				</script>
				<!----//details-product-slider--->
</head>
<body>
{% include '../common/header.html' %}
    <div class="main">
		<div class="container">
		  <div class="single">
		   <div class="row content">
{% include '../common/left-con.html' %}
			   <div class="col-md-9">
		   	   <div class="single_image">
					     <ul id="etalage">
							<li>
								<a href="optionallink.html">
									<img class="etalage_thumb_image" src="{{ goods.pic_url }}" class="img-responsive" alt=""/>
									<img class="etalage_source_image"  src="{{ goods.pic_url }}" class="img-responsive" alt=""/>
								</a>
							</li>

						</ul>
					    </div>
					    <div class="single_right">
				        	<h3>{{ goods.title }}</h3>
				        	<p class="m_5">{{ goods.description }}</p>
				        	<div class="price_single">
							  <span class="reducedfrom">¥{{ goods.oldprice }}</span>
							  <span class="actual1">¥{{ goods.price }}</span>
							</div>

							<div class="btn_form">

								 <input type="submit" id="btnAddCart" value="立即购买" title="">
							</div>
							<ul class="add-to-links">
    			              <li><img src="/static/myhome/images/wish.png" alt=""><a href="#">Add to wishlist</a></li>
    			            </ul>
							<div class="col-xs-12  col-sm-6  col-md-4">
				              <div class="banners--small  banners--small--social">
				                <a href="#" class="social"><i class="zocial-facebook"> </i>
				                <span class="banners--small--text"> Share on<br>Facebook</span>
				                <div class="clearfix"> </div>
				                </a>
				              </div>
            				</div>
                            <div class="col-xs-12  col-sm-6  col-md-4">
				              <div class="banners--small  banners--small--social">
				                <a href="#" class="social"><i class="zocial-twitter"> </i>
				                <span class="banners--small--text"> Tweet it<br>Twitter</span>
				                <div class="clearfix"> </div>
				                </a>
				              </div>
            				</div>
                            <div class="col-xs-12  col-sm-6  col-md-4">
				              <div class="banners--small  banners--small--social">
				                <a href="#" class="social"><i class="zocial-pin"> </i>
				                <span class="banners--small--text">Pin on<br>Pinterest</span>
				                <div class="clearfix"> </div>
				                </a>
				              </div>
            			   </div>
           </div>
		   <div class="clearfix"> </div>
		   <!----product-rewies---->
			<div class="product-reviwes">
				<!--vertical Tabs-script-->
				<!---responsive-tabs---->
					<script src="/static/myhome/js/easyResponsiveTabs.js" type="text/javascript"></script>
					<script type="text/javascript">
						$(document).ready(function () {
							 $('#horizontalTab').easyResponsiveTabs({
									type: 'default', //Types: default, vertical, accordion           
									width: 'auto', //auto or any width like 600px
									fit: true,   // 100% fit in a container
									closed: 'accordion', // Start closed if in accordion view
									activate: function(event) { // Callback function if tab is switched
									var $tab = $(this);
									var $info = $('#tabInfo');
									var $name = $('span', $info);
										$name.text($tab.text());
										$info.show();
									}
								});
													
							 $('#verticalTab').easyResponsiveTabs({
									type: 'vertical',
									width: 'auto',
									fit: true
								 });
						 });
					</script>
				<!---//responsive-tabs---->
				<!--//vertical Tabs-script-->
				<!--vertical Tabs-->
        		<div id="verticalTab">
		            <ul class="resp-tabs-list">
		                <li>生鲜商品售后政策</li>
		                <li>权利声明：</li>
		                <li>价格说明：</li>
		            </ul>
		            <div class="resp-tabs-container vertical-tabs">
		                <div>
		                    <p>注：因厂家会在没有任何提前通知的情况下更改产品包装、产地或者一些附件，京东生鲜不能确保客户收到的货物与商城图片、产地、附件说明完全一致。只能确保为原厂正货！并且保证与当时市场上同样主流新品一致。若京东生鲜没有及时更新，请大家谅解</p>
		                    <p>因厂家会在没有任何提前通知的情况下更改产品包装、产地或者一些附件，京东生鲜不能确保客户收到的货物与商城图片、产地、附件说明完全一致。只能确保为原厂正货！并且保证与当时市场上同样主流新品一致。若京东生鲜没有及时更新，请大家谅解</p>
		                </div>
		                <div>
		                	<p>京东上的所有商品信息、客户评价、商品咨询、网友讨论等内容，是京东重要的经营资源，未经许可，禁止非法转载使用。

注：本站商品信息均来自于合作方，其真实性、准确性和合法性由信息拥有者（合作方）负责。本站不提供任何保证，并不承担任何法律责任。</p>
		                </div>
		                <div>
		                	<p>划线价：商品展示的划横线价格为参考价，并非原价，该价格可能是品牌专柜标价、商品吊牌价或由品牌供应商提供的正品零售价（如厂商指导价、建议零售价等）或该商品在京东平台上曾经展示过的销售价；由于地区、时间的差异性和市场行情波动，品牌专柜标价、商品吊牌价等可能会与您购物时展示的不一致，该价格仅供您参考。

折扣：如无特殊说明，折扣指销售商在原价、或划线价（如品牌专柜标价、商品吊牌价、厂商指导价、厂商建议零售价）等某一价格基础上计算出的优惠比例或优惠金额；如有疑问，您可在购买前联系销售商进行咨询。</p>
		                </div>
		            </div>
       		     </div>
       		     <div class="clearfix"> </div>
		      </div>
		      <div class="related_products">
		      	<h3>推荐商品</h3>
		      	<div class="row">
					{% for i in offprice %}
		      		<div class="col-md-4 related">
						<a href="{% url 'article'%}?gid={{i.id}}">
		      			<img src="{{i.pic_url}}" style="width:100%" class="img-responsive" alt=""/>
						</a>
		      		</div>
					{% endfor %}
		      	</div>
		      </div>
		   </div>    
		</div>
	  </div>
	 </div>
	</div>
{% include '../common/footer.html' %}
<script>
	 $('#btnAddCart').click(function(){
    // 检测是否登录
    var isLogin = '{{ request.session.VipUser.uid }}'
    if(!isLogin){
      alert('请先登录');
      location.href="/login/";
    }

    // 获取 商品id  获取数量
    var data = {}
    data.goodsid = {{ goods.id }}
    data.num = 1
    // 发送ajax.加入到购物车
    $.get('{% url 'cart_add' %}',data,function(data){
        alert(data['msg'])
    },'json')


  })
</script>
</body>
</html>

